﻿<MCard>
    <MNavigationDrawer @bind-Value="_drawer" @bind-MiniVariant="_mini" Permanent>
        <MListItem Class="px-2">
            <MListItemAvatar Size="40">
                <MImage Src="@("https://randomuser.me/api/portraits/men/85.jpg")"></MImage>
            </MListItemAvatar>

            <MListItemTitle>MASA</MListItemTitle>

            <MButton Icon OnClick="() => _mini = !_mini">
                <MIcon>mdi-chevron-left</MIcon>
            </MButton>
        </MListItem>

        <MDivider></MDivider>

        <MList Dense>
            @foreach (var item in _items)
            {
                <MListItem Link>
                    <MListItemIcon>
                        <MIcon>@item.Icon</MIcon>
                    </MListItemIcon>

                    <MListItemContent>
                        <MListItemTitle>@item.Title</MListItemTitle>
                    </MListItemContent>
                </MListItem>
            }
        </MList>
    </MNavigationDrawer>
</MCard>

@code
{
    private bool _drawer = true;
    private bool _mini = true;
    private class ItemDemo
    {
        public string Title { get; set; }
        public string Icon { get; set; }
    }
    private List<ItemDemo> _items = new()
    {
        new ItemDemo { Title = "Home", Icon = "mdi-home-city" },
        new ItemDemo { Title = "My Account", Icon = "mdi-account" },
        new ItemDemo { Title = "Users", Icon = "mdi-account-group-outline" }
    };
}